<template>
  <view class="container">
    <!-- 搜索框，包含地区选择和搜索输入 -->
    <view class="search-box">
      <view class="location" @click="openLocationPicker">
        <text>{{ selectedCity }}</text>
        <text class="iconfont">&#xe601;</text>
      </view>
      <input
          class="search-input"
          type="text"
          v-model="searchQuery"
          placeholder="搜索科室、疾病、医院"
          confirm-type="search"
          @confirm="onSearch"
      />
      <text class="iconfont search-icon">&#xe6d4;</text>
    </view>

    <!-- 挂号分类按钮 -->
    <view class="register-options">
      <!-- 按科室挂号 -->
      <view class="option" @click="navigateTo('department')">
        <image src="/static/department-icon.png" class="option-icon"></image> <!-- 新增：图标放在上方 -->
        <text class="option-text">按科室挂号</text> <!-- 新增：文字放在下方 -->
      </view>

      <!-- 按医院挂号 -->
      <view class="option" @click="navigateTo('hospital')">
        <image src="/static/hospital-icon.png" class="option-icon"></image> <!-- 新增 -->
        <text class="option-text">按医院挂号</text> <!-- 新增 -->
      </view>

      <!-- 按疾病挂号 -->
      <view class="option" @click="navigateTo('disease')">
        <image src="/static/disease-icon.png" class="option-icon"></image> <!-- 新增 -->
        <text class="option-text">按疾病挂号</text> <!-- 新增 -->
      </view>
    </view>

    <!-- 我的挂号记录 -->
    <view class="record-section" @click="navigateTo('record')">
      <view class="record-left">
        <image src="/static/record-icon.png" class="record-icon"></image> <!-- 图标 -->
        <text class="record-text">我的挂号记录</text>
      </view>
      <view class="record-right">
        <text class="view-text">查看</text>
        <text class="iconfont">&#xe601;</text> <!-- 右侧箭头 -->
      </view>
    </view>

    <!-- 本地热门医院 -->
    <view class="hospital-section">
      <text class="section-title">本地热门医院</text>
      <view v-for="(hospital, index) in hospitalList" :key="index" class="hospital-item" @click="navigateToHospital(hospital.id)">
        <image :src="hospital.image" class="hospital-icon"></image>
        <view class="hospital-info">
          <view class="hospital-title">
            <text class="hospital-grade">{{ hospital.grade }}</text>
            <text class="hospital-name">{{ hospital.name }}</text>
          </view>
          <text class="hospital-department">特色科室：{{ hospital.department }}</text>
          <text class="hospital-distance">{{ hospital.distance }}</text>
          <text class="hospital-address">{{ hospital.address }}</text>
        </view>
      </view>
    </view>

    <!-- 地区选择器 -->
    <picker mode="selector" :range="cities" @change="onCityChange" :value="cityIndex" style="display: none;">
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: '北京',
      cities: ['北京', '上海', '广州', '深圳'],
      cityIndex: 0,
      searchQuery: '',
      hospitalList:[],
    };
  },
  methods: {
    openLocationPicker() {
      uni.showActionSheet({
        itemList: this.cities,
        success: (res) => {
          this.cityIndex = res.tapIndex;
          this.selectedCity = this.cities[res.tapIndex];
        },
      });
    },
    onSearch() {
      uni.showToast({
        title: `搜索内容：${this.searchQuery}`,
        icon: 'none',
      });
    },
    navigateTo(type) {
      uni.navigateTo({
        url: `/pages/registrations/${type}/${type}`, // 跳转到对应的页面
      });
    },
    getHospitalList(){
      uni.request({
        url:'http://localhost:8080/app/registration/listHospital',
        success:result => {
          if (result.data.code==200){
            console.log(result)
            this.hospitalList = result.data.rows;
          }
        }
      })
    }
  },
  created() {
    this.getHospitalList()
  },
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.location {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  border-right: 1rpx solid #ccc;
}

.search-input {
  flex: 1;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.search-icon {
  font-size: 36rpx;
  margin-left: 20rpx;
  color: #999;
}

.register-options {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.option {
  flex: 1;
  text-align: center;
}

.option-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

/* 新增：挂号分类按钮样式 */
.register-options {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

/* 新增：每个按钮居中且垂直排列 */
.option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 新增：图标样式 */
.option-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

/* 文字样式 */
.option-text {
  font-size: 28rpx;
  color: #333;
}

/* 我的挂号记录样式 */
.record-section {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-left {
  display: flex;
  align-items: center;
}

.record-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.record-text {
  font-size: 28rpx;
  color: #333;
}

.record-right {
  display: flex;
  align-items: center;
}

.view-text {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

/* 本地热门医院 */
.hospital-section {
  margin-top: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.hospital-item {
  display: flex;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.hospital-icon {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.hospital-info {
  flex: 1;
}

.hospital-title {
  display: flex;
  align-items: center;
}

.hospital-grade {
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
  background-color: #4caf50;
  color: #fff;
  margin-right: 10rpx;
  font-size: 24rpx;
}

.hospital-name {
  font-size: 28rpx;
  color: #333;
}

.hospital-department, .hospital-distance, .hospital-address {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
</style>
